<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
  </head>
  <body>
    <div
      id="map"
      style="height: 800px"
    ></div>
    <script>
      var map = L.map('map').setView([37.8, -96], 4);

      var tiles = L.tileLayer(
        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
          maxZoom: 19,
          attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        }
      ).addTo(map);

      L.geoJson(statesData).addTo(map);
      function getColor(d) {
        return d > 1000
          ? '#800026'
          : d > 500
          ? '#BD0026'
          : d > 200
          ? '#E31A1C'
          : d > 100
          ? '#FC4E2A'
          : d > 50
          ? '#FD8D3C'
          : d > 20
          ? '#FEB24C'
          : d > 10
          ? '#FED976'
          : '#FFEDA0';
      }
      function style(feature) {
        return {
          fillColor: getColor(feature.properties.density),
          weight: 2,
          opacity: 1,
          color: 'white',
          dashArray: '3',
          fillOpacity: 0.7,
        };
      }

      L.geoJson(statesData, { style: style }).addTo(map);
    </script>
  </body>
</html>
